.el-header {
  background-color: #f4f4f4;
  color: #333;
  line-height: 40px;
  height: 50px;
  display: flex;
  align-items: center;

  z-index: 4;
  width: 100% !important;
  position: fixed;
  border-bottom: 1px solid #ebebeb;

  i {
    font-size: 17px;
    padding: 0 8px;
    position: relative;
    color: #247ffd;
    transition: 0.4s ease;
  }

  .logo {
    width: 150px;
    height: 30px;
    padding: 0 20px;
  }
  .home {
    margin-right: 20px;
    font-size: 16px;
    transition: 0.4s ease;
    padding: 5px;
    // background-color: #313030;
  }
  .home:hover {
    background-color: #b1b1b1;
    border-radius: 25px;
  }

  .home:active {
    background-color: #818181;
    border-radius: 30px;
  }
  .tips {
    font-size: 16px;
  }
  .top-r {
    padding-right: 30px;
    display: flex;
    position: absolute;
    right: 20px;

    .setting {
      margin-right: 45px;
    }

    i {
      font-size: 17px;
      padding: 0 8px;
      position: relative;
      color: #237fff;
      transition: 0.4s ease;
    }

    span {
      font-size: 16px;
    }

    // i:hover {
    //   background-color: #b1b1b1;
    //   border-radius: 25px;
    // }

    // i:active {
    //   background-color: #818181;
    //   border-radius: 30px;
    // }
  }
  .el-dropdown {
    // background-color: #ffffff;
    transition: 0.4s ease;
  }
  .el-dropdown:hover {
    background-color: #b1b1b1;
    border-radius: 25px;
  }

  .el-dropdown:active {
    background-color: #818181;
    border-radius: 30px;
  }
}
